.ck-triangle {
  &:before,&:after {
    position:absolute;
    display:block;
    content:'';
    border: 10px solid transparent;
  }
  --ck-triangle: #dee2e6;
}

.ck-triangle-top:before{
    border-bottom-color: var(--ck-triangle-cus,var(--ck-triangle));
    left: calc(50% - 10px);
    top: -20px;
}

.ck-triangle-xl:before{
    left: 5px !important;
}

.ck-triangle-xr:before{
    left: unset!important;
    right: 5px;
}

.ck-triangle-bottom:before{
    border-top-color: var(--ck-triangle-cus,var(--ck-triangle));
    left: calc(50% - 10px);
    bottom: -20px;
}

.ck-triangle-left:before {
  border-right-color: var(--ck-triangle-cus,var(--ck-triangle));
  left: -20px;
  top: calc(50% - 10px);
}

.ck-triangle-yt:before {
  top: 5px !important;
}

.ck-triangle-yb:before {
  top: unset !important;
  bottom: 5px;
}

.ck-triangle-right:before {
  border-left-color: var(--ck-triangle-cus,var(--ck-triangle));
  right: -20px;
  top: calc(50% - 10px);
}